<template>
    <uni-popup ref="popupRef" type="bottom" border-radius="10px 10px 0 0">
        <view class="popup-box">
            <view class="header-box">
                <view></view>
                <view class="title">{{title}}</view>
                <view class="right-box">
                    <up-icon name="close" color="#303133" size="24" @tap="close"></up-icon>
                </view>
            </view>
            <view class="content-box">
                <slot/>
            </view>
            <view class="footer">
                <slot name="footer"></slot>
            </view>
        </view>
    </uni-popup>
</template>
<script setup>
const props = defineProps({
    title: {
        type: String,
        default: ''
    }
})

const popupRef = ref()
const open = () => {
    popupRef.value.open()
}
const close = () => {
    popupRef.value.close()
}

defineExpose({
    open,
    close
})
</script>
<style scoped lang="scss">
.popup-box {
    display: flex;
    flex-direction: column;
    border-radius: 24rpx 24rpx 0 0;
    background-color: #fff;
    .header-box{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 24rpx 32rpx;
        box-sizing: border-box;
        .title{
            text-align: center;
            font-size: 32rpx;
        }
        .right-box{
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }
    .content-box {
        flex: 1;
        min-height: 20vh;
        max-height: 40vh;
        overflow-y: auto;
    }
    
    .footer {
        padding: 0 32rpx;
        box-sizing: border-box;
    }
}
</style>
